<template>
    <el-form :model="formModel" :rules="rules" ref="addressForm" label-width="80px">
        <!-- 收货人 -->
        <el-form-item label="收货人" prop="receiveName">
            <el-input v-model="formModel.receiveName" placeholder="请输入姓名"
                @input="handleInput('receiveName')"></el-input>
        </el-form-item>

        <!-- 联系电话 -->
        <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formModel.phone" placeholder="请输入手机号" @input="handleInput('phone')"></el-input>
        </el-form-item>

        <!-- 所在地区 -->
        <el-form-item label="所在地区" prop="region">
            <el-cascader v-model="formModel.region" :options="regionOptions" placeholder="请选择地区"
                @change="handleRegionChange"></el-cascader>
        </el-form-item>

        <!-- 详细地址 -->
        <el-form-item label="详细地址" prop="detail">
            <el-input v-model="formModel.detail" type="textarea" :rows="3" placeholder="街道、楼号等详细信息"
                @input="handleInput('detail')"></el-input>
        </el-form-item>

        <!-- 设为默认 -->
        <el-form-item label="设为默认">
            <el-switch v-model="formModel.isDefault" @change="handleDefaultChange"></el-switch>
        </el-form-item>

        <!-- 操作按钮 -->
        <div class="dialog-footer">
            <el-button @click="$emit('cancel')">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-form>
</template>

<script>
export default {
    props: {
        formData: {
            type: Object,
            required: true
        },
        currentIndex: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            // rules: {
            //     receiveName: [
            //         { required: true, message: '请输入收货人姓名', trigger: 'blur' }
            //     ],
            //     phone: [
            //         { required: true, message: '请输入联系电话', trigger: 'blur' },
            //         { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
            //     ],
            //     region: [
            //         { required: true, message: '请选择所在地区', trigger: 'change' }
            //     ],
            //     detail: [
            //         { required: true, message: '请输入详细地址', trigger: 'blur' }
            //     ]
            // },
            formModel: JSON.parse(JSON.stringify(this.formData)),
            regionOptions: [
                {
                    value: '河南省',
                    label: '河南省',
                    children: [
                        {
                            value: '郑州市',
                            label: '郑州市',
                            children: [
                                { value: '中原区', label: '中原区' },
                                { value: '二七区', label: '二七区' },
                                { value: '管城回族区', label: '管城回族区' },
                                { value: '金水区', label: '金水区' },
                                { value: '上街区', label: '上街区' },
                                { value: '惠济区', label: '惠济区' },
                                { value: '中牟县', label: '中牟县' },
                                { value: '巩义市', label: '巩义市' },
                                { value: '荥阳市', label: '荥阳市' },
                                { value: '新密市', label: '新密市' },
                                { value: '新郑市', label: '新郑市' },
                                { value: '登封市', label: '登封市' }
                            ]
                        },
                        {
                            value: '开封市',
                            label: '开封市',
                            children: [
                                { value: '龙亭区', label: '龙亭区' },
                                { value: '顺河回族区', label: '顺河回族区' },
                                { value: '鼓楼区', label: '鼓楼区' },
                                { value: '禹王台区', label: '禹王台区' },
                                { value: '祥符区', label: '祥符区' },
                                { value: '杞县', label: '杞县' },
                                { value: '通许县', label: '通许县' },
                                { value: '尉氏县', label: '尉氏县' },
                                { value: '兰考县', label: '兰考县' }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    watch: {
        formData: {
            handler(newVal) {
                this.formModel = JSON.parse(JSON.stringify(newVal))
            },
            deep: true
        }
    }, mounted() {
        console.log('this.currentIndex,', this.currentIndex);

    },
    methods: {
        handleInput(field) {
            this.$emit('update:formData', {
                ...this.formData,
                [field]: this.formModel[field]
            })
        },

        handleRegionChange(value) {
            this.formModel.region = value
            this.$emit('update:formData', {
                ...this.formData,
                region: value
            })
            this.$refs.addressForm.validateField('region')
        },

        handleDefaultChange(value) {
            this.formModel.isDefault = value
            this.$emit('update:formData', {
                ...this.formData,
                isDefault: value
            })
        },

        async submitForm() {
            try {
                await this.$refs.addressForm.validate()

                const submitData = {
                    ...this.formModel,
                    province: this.formModel.region?.[0] || '',
                    city: this.formModel.region?.[1] || '',
                    street: this.formModel.region?.[2] || '',
                    isDefault: this.formModel.isDefault ? 1 : 0,
                    oldIsDefault: this.currentIndex
                }
                delete submitData.region

                this.$emit('submit', submitData)
            } catch (error) {
                console.log('表单验证失败:', error)
            }
        }
    }
}
</script>

<style scoped>
.dialog-footer {
    text-align: right;
    margin-top: 20px;
}
</style>